<!--用户详情界面-->
<template>
    <div class="container">
        <el-card class="center_card">
            <el-table
            :data="orderList">
                <el-table-column
                        label="订单号" prop="orderId">
                </el-table-column>
                <el-table-column
                        label="总金额" prop="payment">
                </el-table-column>
                <el-table-column
                        label="购买时间" prop="createTime">
                </el-table-column>
                <el-table-column
                        label="查看详情">
                    <template slot-scope="scope">
                        <el-button plain size="small" type="primary" @click="toDetail(scope.row.orderId)">
                          查看订单详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="50%">

          <el-card>
            <div style="width: 40%;height: 100%;float: left;">
              <img :src="detailOrder.imageUrl" style="width: 100%;height: 100%">
            </div>
            <div style="width: 60%;height: 100%;float: right">
              <div style="font-size: 35px;font-weight: 400">
                {{detailOrder.bookName}}
              </div>
              <div style="margin-top: 10px;font-size: 25px;font-weight: 300;">
                单 价：{{detailOrder.unitPrice}}
              </div>
              <div style="margin-top: 10px;font-size: 25px;font-weight: 300;">
                购 买 数 目：{{detailOrder.num}}
              </div>
            </div>

          </el-card>


          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">关 闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "userDetail",
        data(){
            return{
              orderList:[],
              detailOrder:{
                bookName:"",
                imageUrl:"",
                totalPrice:0,
                unitPrice:0,
                bookId:1,
                num:0,
              },
              dialogVisible:false
            }
        },
        mounted() {
            this.getOrder()
        },
        methods:{
            async toDetail(orderId){
              let form = {
                orderId:orderId
              }
              const {data:res} = await this.$http.post('http://120.46.132.13:8081/viewDetailedOrders',form)
              if(res.code===200||res.code===0){
                this.detailOrder = res.data;
                this.detailOrder.num = this.detailOrder.totalPrice/this.detailOrder.unitPrice;
                this.dialogVisible=true;
              }else{
                this.$notify.error("获取详细信息失败")
              }

            },
            getOrder(){
                let mydata= {
                    uid:sessionStorage.getItem('userId')
                }
                axios.post('/viewOrders',mydata).then((res)=>{
                    console.log(res)
                    this.orderList=res.data.data.reverse()
                })
            }
        }
    }
</script>

<style scoped>
    .container{
        width: 100%;
    }
    .center_card{
        width: 70%;
        margin: auto;
    }
    .item_in_list{
        margin: 5px;
    }
    .image{
        width: 20%;
    }
    .detail{
        width: 80%;
    }
    .operation{
        width: 25%;
    }
    .checkbox{
        height: 100%;
        align-items: center;
    }
</style>
